<template>
	<view class="container">
		<img v-if="showFlashScreen" class="flash-screen" src="/static/flash_screen.jpg" alt="" />

		<!-- 头部背板 -->
		<view class="header-background">
			<view class="header-btns">
				<el-button type="" style="margin-left: 16px;" @click="pageJump('my')" link>
					<!-- <i class="fa fa-bars" style="color: #FFF; font-size: 24px;"></i> -->
					<img class="header-avatar" src="/static/default_avatar.png" alt="" />
					<span class="header-account">{{ userInfo.account }}</span>
				</el-button>
				<view class="logout-btn" @click="logout">
					退出登录
				</view>
			</view>
			<h2>欢迎使用码行ATM管理系统！</h2>
		</view>

		<!-- 在线/离线设备 -->
		<view class="card on-and-off-device">
			<view class="devices on-devices" @click="pageJump('onDevices');">
				<view class="moral">
					<view class="devices-count">
						<view class="dot-sign" style="background-color: greenyellow;" v-show="devices.on > 0">
						</view>{{ devices.on }}
					</view>
					<view class="devices-name">在线设备</view>
				</view>
			</view>

			<view class="devices" @click="pageJump('offDevices');">
				<view class="devices-count">
					<view class="dot-sign" style="background-color: gray;" v-show="devices.off > 0">
					</view>{{ devices.off }}
				</view>
				<view class="devices-name">离线设备</view>
			</view>
		</view>

		<!-- 功能选项 -->
		<view class="card all-options">
			<p class="title">常用功能</p>
			<view class="options-wrapper">
				<Option v-for="(item, index) in mainFunctions" :key="index" :optionName="item.title"
					:logoUrl="item.logoUrl" @click="pageJump(`${item.page}`);"></Option>
			</view>
		</view>

		<view class="footer">
			<text>一切解释权归码上有钱银行所有<br>Copyright © 2025 码上有钱, All rights reserved.</text>
		</view>
	</view>
</template>

<script>
	import Option from '/components/Option.vue';
	import Marquee from '/components/Marquee.vue';
	import {
		getAtms,
		getAtmsByUserId
	} from '@/api/atm';
	import {
		getUserByAccount
	} from '@/api/user';

	export default {
		components: {
			Option,
			Marquee,
		},
		data() {
			return {
				hasLoggedin: false,
				showFlashScreen: true,
				userInfo: {},

				mainFunctions: [{
						title: "设备管理",
						logoUrl: "/static/logo_device.png",
						page: "deviceManagement",
					}, {
						title: "人员管理",
						logoUrl: "/static/logo_member.png",
						page: "memberManagement",
					},
					{
						title: "操作日志",
						logoUrl: "/static/logo_log.png",
						page: "operationLog",
					},
					{
						title: "数据统计",
						logoUrl: "/static/logo_static.png"
					},
					{
						title: "团队信息",
						logoUrl: "/static/logo_member.png",
						page: "groupInfo",
					}
				],

				drawerFunctions: [{
						title: "设备状态",
						logoUrl: "/static/logo_state.png"
					},
					{
						id: "groupInfo",
						title: "团队信息",
						logoUrl: "/static/logo_group.png",
					},
				],
				drawer: false,
				drawerFontStyle: {
					color: "#FFF"
				},

				devices: {
					on: 0,
					off: 0
				},
			}
		},

		computed: {
			duration() {
				const len = this.marqueeText.length
				return len > 80 ? len / 8 : 10;
			}
		},

		beforeMount() {
			this.showFlashScreen = uni.getStorageSync('showFlashScreen');
		},

		onLoad: async function() {
			const hasLoggedin = uni.getStorageSync('hasLoggedin');
			if (hasLoggedin) {
				this.hasLoggedin = hasLoggedin;
			}
			if (this.hasLoggedin) {
				await this.checkLoginStatus();
			} else {
				setTimeout(async () => {
					await this.checkLoginStatus();
				}, 2000);
			}
		},

		methods: {
			// 检查登录状态
			async checkLoginStatus() {
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					this.userInfo = JSON.parse(storedUserInfo);
					console.log(this.userInfo);
					await this.fetchData();
				} else {
					uni.showToast({
						title: "请登录",
						icon: "error",
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/login/login`
						});
					}, 1000);
				}
			},

			// 获取数据
			async fetchData() {
				// 功能面板显示
				if (this.userInfo.userType !== 2) {
					this.mainFunctions = this.mainFunctions.slice(0, 1).concat(this.mainFunctions.slice(2));
				}

				// 在线/离线 ATM 数量显示
				const atmDatas = this.userInfo.userType === 2 ? await getAtms() : await getAtmsByUserId(this.userInfo
					.id);
				// console.log(this.userInfo.userType);
				if (atmDatas.code !== 200) {
					uni.showToast({
						title: "获取设备状态失败",
						icon: "error",
						duration: 2000
					})
				} else {
					atmDatas.data.forEach(i => {
						if (i.status === "on") {
							this.devices.on++;
						} else {
							this.devices.off++;
						}
					});

					uni.setStorageSync("atmDatas", atmDatas.data); // 永远不会删除
				}

			},

			// 事件委托
			handleClick(event) {
				console.log(event.target.innerText);
			},

			// 页面跳转
			pageJump(target) {
				if (target) {
					if (target === "onDevices" || target === "offDevices") {
						uni.navigateTo({
							url: `/pages/devices/${target}`
						});
					} else {
						uni.navigateTo({
							url: `/pages/${target}/${target}`
						});
					}
				}
			},

			// 登出
			logout() {
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('token');
				uni.setStorageSync('showFlashScreen', true);
				uni.removeStorageSync('hasLoggedin');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		height: 100vh;
	}

	.flash-screen {
		position: absolute;
		z-index: 10;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		animation: fadeOut 2s ease forwards;
	}

	/* 淡出动画 */
	@keyframes fadeOut {
		80% {
			opacity: 1;
			display: block;
		}

		100% {
			opacity: 0;
			display: none;
		}
	}

	.header-background {
		position: absolute;
		z-index: 1;
		padding-top: 44px;
		width: 100%;
		height: 40%;
		background-image: linear-gradient(#BD3124, #BD3124, #BD3124, #BD3124, #BD3124, #BD3124, #F5F5F5); // 渐变
	}

	.header-icon {
		margin-top: 44px;
		padding: 20px;
		height: 24px;
	}

	.header-btns {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-avatar {
		margin-right: 8px;
		width: 32px;
		height: 32px;
		border-radius: 16px;
	}

	.header-account {
		color: #FFF;
		font-size: 20px;
		line-height: 32px;
		font-weight: 700;
		font-family: 'Courier New', Courier, monospace;
	}

	.logout-btn {
		margin-right: 16px;
		width: 72px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		color: #FFF;
		font-size: 12px;
		border: 1px solid #FFF;
		border-radius: 12px;
	}

	h2 {
		line-height: 120px;
		text-align: center;
		color: #FFF;
	}

	.card {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

		padding: 20px 20px;
		width: 85%;
		min-height: 70px;
		border-radius: 12px;
		background-color: #FFF;
		// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
	}

	.on-and-off-device {
		padding: 20px 0;
		top: 26%;
		display: flex;
		width: 95%;
		height: 80px;
		justify-content: space-between;
		align-items: self-end;
		background-color: transparent;
	}

	.devices {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 140px;
		height: 100%;
		background-color: #FFF;
		border-radius: 12px;
	}

	.devices-count {
		height: 32px;
		font-size: 36px;
		line-height: 32px;
		font-weight: 700;
		// font-family: "Times New Roman", Times, serif;
		font-family: -apple-system;
	}

	.on-devices {
		position: relative;
		width: 224px;
		height: 110px;
		overflow: hidden;
	}

	.moral {
		position: relative;
		z-index: 1;
		width: 216px;
		height: 102px;
		border-radius: 12px;
		background: #FFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.on-devices::before {
		content: '';
		position: absolute;
		top: -3px;
		left: -3px;
		right: -3px;
		bottom: -3px;
		background: linear-gradient(45deg,
				transparent 20%,
				#F4CE98 30%,
				#FFFBC7 40%,
				#FBB03B 50%,
				#EDD181 60%,
				#FFFBC7 70%,
				transparent 80%);
		background-size: 300% 300%;
		border: 10px solid transparent;
		border-radius: 10px;
		animation: borderScroll 4s linear infinite;
	}

	@keyframes borderScroll {

		0%,
		100% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}
	}

	.on-devices .devices-count {
		margin-bottom: 8px;
		height: 50px;
		font-size: 60px;
		line-height: 50px;
		font-weight: 600;
		color: #BD3124;
	}

	.dot-sign {
		display: inline-block;
		margin-bottom: 12px;
		margin-left: -12px;
		margin-right: 8px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
	}

	.devices-name {
		margin-top: 4px;
		height: 28px;
		font-size: 16px;
		font-weight: 500;
		line-height: 28px;
		color: #333;
	}

	.marquee {
		position: absolute;
		z-index: 1;
		top: 37%;
		height: 32px;
	}

	.all-options {
		top: 39%;
		height: 260px;
	}

	.title {
		margin-bottom: 16px;
		font-size: 20px;
		font-weight: 700;
	}

	.options-wrapper {
		display: grid;
		grid-template-columns: auto auto auto;
		justify-content: space-around;
		align-content: space-around;
		width: 100%;
		height: 200px;
	}

	.contract {
		height: 160px;
	}

	.expand {
		height: 200px;
	}

	.footer {
		position: absolute;
		z-index: 1;
		bottom: 0;
		width: 100%;
		height: 48px;
		padding-bottom: 12px;
		text-align: center;
	}

	.footer text {
		color: #666;
		font-size: 12px;
	}

	.functions-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		background-color: #BD3124;
		color: #FFF;
		text-shadow: 0 1px 2px #A16222;
	}

	.user-card {
		display: flex;
		align-items: center;
		margin-top: 12vh;
		margin-bottom: 36px;
		height: 120px;
	}

	.user-avatar {
		display: block;
		width: 72px;
		height: 72px;
		border-radius: 8px;
		background-color: #333;
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 72px;
		padding-left: 12px;
		color: #FFF;
	}

	.user-title {
		width: 80px;
		height: 28px;
		border-radius: 8px;
		text-align: center;
		line-height: 28px;
		font-size: 12px;
		color: #F5F5F5;
		background-color: #666;
	}

	.advanced {
		background-image: linear-gradient(to bottom right, #F4CE98, #FFFBC7, #FBB03B, #EDD181, #FFFBC7); // 渐变
		color: #A16222;
		font-style: italic;
		font-weight: 500;
	}

	.middle {
		background-color: rgb(154, 154, 154, 0.9);
		background-image: linear-gradient(to bottom right, #f5f5f5, #777, #555, #333333, #eeeeee);
		font-style: italic;
		font-weight: 500;
		color: #F5F5F5;
	}

	.primary {
		color: #F5F5F5;
		background-color: #666;
	}

	.other-functions {
		margin-bottom: 12vh;
	}

	ul {
		list-style-type: none;
		padding: 0px;
	}

	ul li {
		height: 52px;
		line-height: 52px;
	}

	ul li .fa {
		display: inline-block;
		margin-right: 12px;
		width: 24px;
		height: 24px;
	}
</style>